<template>
	<view class="tags" :class="[whiteBg ? 'bg-white' : '']">
		<text>已领礼金：</text>
		<uni-tag class="tags-margin" text="7元" size="small" type="error" :inverted="lijin == 7 ? false : true" :circle='true' @click="bindClick(7)"></uni-tag>
		<uni-tag class="tags-margin" text="6元" size="small" type="error" :inverted="lijin == 6 ? false : true" :circle='true' @click="bindClick(6)"></uni-tag>
		<uni-tag class="tags-margin" text="5元" size="small" type="error" :inverted="lijin == 5 ? false : true" :circle='true' @click="bindClick(5)"></uni-tag>
		<uni-tag class="tags-margin" text="4元" size="small" type="error" :inverted="lijin == 4 ? false : true" :circle='true' @click="bindClick(4)"></uni-tag>
		<uni-tag class="tags-margin" text="3元" size="small" type="error" :inverted="lijin == 3 ? false : true" :circle='true' @click="bindClick(3)"></uni-tag>
		<uni-tag class="tags-margin" text="2元" size="small" type="error" :inverted="lijin == 2 ? false : true" :circle='true' @click="bindClick(2)"></uni-tag>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				lijin: 5,
			}
		},
		props: {
			whiteBg:{
				type: Boolean,
				default: false
			},
			value: {
				type: [String, Number],
				default: 0
			},
		},
		watch: {
			value() {
				this.lijin = this.value
			},
		},
		methods: {
			bindClick(e) {
				this.$emit('click', e);
			},
		}
	}
</script>

<style>
	.tags {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow: hidden;
		align-items: center;
		font-size: 24rpx;
		padding: 10rpx 20rpx;
	}
	
	.tags-margin {
		margin: 0 10rpx
	}
</style>
